<!doctype html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Layui</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="../plugins/layui/css/layui.css" media="all" />
        <link rel="stylesheet" href="../css/global.css" media="all">
        <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="../css/table.css" />
    </head>
    <body>
        <div style="margin: 15px;">	

            <div class="layui-tab layui-tab-card">
                <ul class="layui-tab-title">
                    <li class="layui-this">事项库</li>                                   
                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">                        
                        <blockquote class="layui-elem-quote">
                           
                            <form class="layui-form" action="">				
                                <div class="layui-form-item">
					<label class="layui-form-label">服务主题</label>
					<div class="layui-input-inline">
						<select name="quiz">
							<option value="">—— 请选择 ——</option>
							<option value="主题名称1">主题名称1</option>
							<option value="主题名称2">主题名称2</option>
                                                        <option value="主题名称3">主题名称3</option>
                                                        <option value="主题名称4">主题名称4</option>
						</select>
					</div>                                      
                                        <label class="layui-form-label">事项名称</label>
					<div class="layui-input-inline">
						<input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入标题" class="layui-input">
					</div> 
                                        <button class="layui-btn" lay-submit="" lay-filter="demo1">搜索</button>
					<button type="reset" class="layui-btn layui-btn-primary">重置</button>                                       
					
                                        <a href="addItems.html" class="layui-btn layui-btn-danger"><i class="layui-icon"></i> 添加</a>
				</div>
			</form>
                        </blockquote>
                        <table class="site-table table-hover">
                            <thead>
                                <tr>
                                    <th><input type="checkbox" id="selected-all"></th>                                 
                                    <th>事项编号</th>
                                    <th>事项名称</th>
                                    <th>类型</th>
                                    <th>服务主题</th>                                                                 
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td><input type="checkbox"></td>                                   
                                    <td>FN0180503</td>
                                    <td>事项名称事项名称</td>
                                    <td>行政审批</td>
                                    <td title="主题名称主题名称主题名称主题名称5555555">鼠标移入显示全部hah…</td>                                                                   
                                    <td>
                                        <a href="../businessSystem/detail.html" >详情 | </a>
                                        <a href="../businessSystem/edit.html">编辑</a>                                       
                                    </td>
                                </tr> 
                                <tr>
                                    <td><input type="checkbox"></td>                                   
                                    <td>FN0180503</td>
                                    <td>事项名称事项名称</td>
                                    <td>行政审批</td>
                                    <td title="主题名称主题名称主题名称主题">主题名称主题名称主题名称</td>                                                                   
                                    <td>
                                        <a href="../businessSystem/detail.html" >详情 | </a>
                                        <a href="../businessSystem/edit.html">编辑</a>                                       
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>                                   
                                    <td>FN0180503</td>
                                    <td>事项名称事项名称</td>
                                    <td>行政审批</td>
                                    <td title="主题名称主题名称主题名称主题">主题名称主题名称主题名称</td>                                                                   
                                    <td>
                                        <a href="../businessSystem/detail.html" >详情 | </a>
                                        <a href="../businessSystem/edit.html">编辑</a>                                       
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>                                   
                                    <td>FN0180503</td>
                                    <td>事项名称事项名称</td>
                                    <td>行政审批</td>
                                    <td title="主题名称主题名称主题名称主题">主题名称主题名称主题名称</td>                                                                   
                                    <td>
                                        <a href="../businessSystem/detail.html" >详情 | </a>
                                        <a href="../businessSystem/edit.html">编辑</a>                                       
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>                                   
                                    <td>FN0180503</td>
                                    <td>事项名称事项名称</td>
                                    <td>行政审批</td>
                                    <td title="主题名称主题名称主题名称主题">主题名称主题名称主题名称</td>                                                                   
                                    <td>
                                        <a href="../businessSystem/detail.html" >详情 | </a>
                                        <a href="../businessSystem/edit.html">编辑</a>                                       
                                    </td>
                                </tr>
                                <tr>
                                    <td><input type="checkbox"></td>                                   
                                    <td>FN0180503</td>
                                    <td>事项名称事项名称</td>
                                    <td>行政审批</td>
                                    <td title="主题名称主题名称主题名称主题">主题名称主题名称主题名称</td>                                                                   
                                    <td>
                                        <a href="../businessSystem/detail.html" >详情 | </a>
                                        <a href="../businessSystem/edit.html">编辑</a>                                       
                                    </td>
                                </tr>
                            </tbody>
                        </table>                       
                        <div class="admin-table-page">
                            <div id="page" class="page">
                            </div>
                        </div>
                    </div>                                 
                </div>
            </div>
        </div>
        <div class="admin-table-page">
            <div id="page" class="page">
            </div>
        </div>
        <script type="text/javascript" src="../plugins/layui/layui.js"></script>
        <script>
            layui.use('element', function () {
                var $ = layui.jquery,
                        element = layui.element(); //Tab的切换功能，切换事件监听等，需要依赖element模块
                $('.site-demo-active').on('click', function () {
                    var type = $(this).data('type');
                    active[type] ? active[type].call(this) : '';
                });
            });

            //搜索表单
            layui.use(['form', 'layedit', 'laydate'], function () {
                var form = layui.form(),
                        layer = layui.layer,
                        layedit = layui.layedit,
                        laydate = layui.laydate;
            });

            //页码
            layui.config({
                base: '../plugins/layui/modules/'
            });

            layui.use(['icheck', 'laypage', 'layer'], function () {
                var $ = layui.jquery,
                        laypage = layui.laypage,
                        layer = parent.layer === undefined ? layui.layer : parent.layer;
                $('input').iCheck({
                    checkboxClass: 'icheckbox_flat-green'
                });

                //page
                laypage({
                    cont: 'page',
                    pages: 25 //总页数
                    ,
                    groups: 5 //连续显示分页数
                    ,
                    jump: function (obj, first) {
                        //得到了当前页，用于向服务端请求对应数据
                        var curr = obj.curr;
                        if (!first) {
                            //layer.msg('第 '+ obj.curr +' 页');
                        }
                    }
                });

                $('#search').on('click', function () {
                    parent.layer.alert('你点击了搜索按钮')
                });

                $('#add').on('click', function () {
                    $.get('temp/edit-form.html', null, function (form) {
                        layer.open({
                            type: 1,
                            title: '添加表单',
                            content: form,
                            btn: ['保存', '取消'],
                            area: ['600px', '400px'],
                            maxmin: true,
                            yes: function (index) {
                                console.log(index);
                            },
                            full: function (elem) {
                                var win = window.top === window.self ? window : parent.window;
                                $(win).on('resize', function () {
                                    var $this = $(this);
                                    elem.width($this.width()).height($this.height()).css({
                                        top: 0,
                                        left: 0
                                    });
                                    elem.children('div.layui-layer-content').height($this.height() - 95);
                                });
                            }
                        });
                    });
                });

                $('#import').on('click', function () {
                    var that = this;
                    var index = layer.tips('只想提示地精准些', that, {tips: [1, 'white']});
                    $('#layui-layer' + index).children('div.layui-layer-content').css('color', '#000000');
                });

                $('.site-table tbody tr').on('click', function (event) {
                    var $this = $(this);
                    var $input = $this.children('td').eq(0).find('input');
                    $input.on('ifChecked', function (e) {
                        $this.css('background-color', '#EEEEEE');
                    });
                    $input.on('ifUnchecked', function (e) {
                        $this.removeAttr('style');
                    });
                    $input.iCheck('toggle');
                }).find('input').each(function () {
                    var $this = $(this);
                    $this.on('ifChecked', function (e) {
                        $this.parents('tr').css('background-color', '#EEEEEE');
                    });
                    $this.on('ifUnchecked', function (e) {
                        $this.parents('tr').removeAttr('style');
                    });
                });
                $('#selected-all').on('ifChanged', function (event) {
                    var $input = $('.site-table tbody tr td').find('input');
                    $input.iCheck(event.currentTarget.checked ? 'check' : 'uncheck');
                });
            });

        </script>

    </body>

</html>